<template>
  <div id="index" ref="appRef">
    <dv-border-box-11 :titleWidth="500" title="车保中心公务车管理系统" style="font-size:20px">
      <div class="bad-water-wrap">
        <div class="left-box">
          <div class="left-up">
            <dv-border-box-10 >
              <TaskList  style="flex:1;padding: 8px" />
            </dv-border-box-10>

          </div>
          <div class="left-mid">
            <dv-border-box-12 style="display: flex;flex-direction: column">
              <myTitle style="background: rgba(75,103,175,0.16)" name="报警内容" />
              <div class="baojing-wrap" style="display:flex;flex: 1;align-items: center;justify-content: center;flex-direction: column">
                <img style="width: 40px;height: 40px" :src="noData" />
                <div style="text-align: center;font-size: 12px">暂无报警数据</div>
              </div>
            </dv-border-box-12>

          </div>
          <div class="left-down">
            <dv-border-box-1>
              <CarMileageRank style="padding: 6px" />
            </dv-border-box-1>
          </div>
        </div>
        <div class="middle-box">
          <dv-border-box-9>
            <div id="map-container" style="width: 100%;height: 100%"></div>
          </dv-border-box-9>
        </div>

        <!--        -->
        <div class="right-box">
          <div class="right-up">
            <dv-border-box-10 style="flex:1;padding: 0px">
              <RunCarNum  />
            </dv-border-box-10>

          </div>
          <div class="right-mid">
            <dv-border-box-12 style="flex:1;padding: 0px">
              <RunTaskNum style="border-radius: 2px" />
            </dv-border-box-12>

          </div>
          <div class="right-down">
            <dv-border-box-1 style="padding: 6px">
                <RunCarKilometer />
            </dv-border-box-1>

          </div>
        </div>
      </div>

    </dv-border-box-11>

  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from 'vue'
import {formatTime} from '@/utils'
import {WEEK} from '@/constant/index'
import useDraw from '@/utils/useDraw'
import myTitle from "./component/myTitle/index.vue"
import {useInitMapHook} from "./hooks/useInitMaphook.js"
import TaskList from "./component/任务列表/index.vue"
import CarMileageRank from "./component/车辆里程排名/index.vue"
import RunCarNum from "./component/单位出车数量/index.vue"
import RunTaskNum from "./component/出车任务数量/index.vue"
import RunCarKilometer from "./component/出车任务里程/index.vue"
import noData from "./asset/img/noData.png"
const {map,AMap} = useInitMapHook("map-container");

import {carListData} from "./testData.js"

// * 颜色
const decorationColors = ['#568aea', '#000000']
// * 加载标识
const loading = ref<boolean>(true)
// * 时间内容
const timeInfo = reactive({
  setInterval: 0,
  dateDay: '',
  dateYear: '',
  dateWeek: ''
})
// * 适配处理
const {appRef, calcRate, windowDraw, unWindowDraw} = useDraw()


// methods
// todo 处理 loading 展示
const cancelLoading = () => {
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// todo 处理时间监听
const handleTime = () => {
  timeInfo.setInterval = setInterval(() => {
    const date = new Date()
    timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
    timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
    timeInfo.dateWeek = WEEK[date.getDay()]
  }, 1000)
}



// 生命周期
onMounted(() => {
  cancelLoading()
  // todo 屏幕适应
  windowDraw()

})

onUnmounted(() => {
  unWindowDraw()
  clearInterval(timeInfo.setInterval)
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
:deep(.dv-border-box-11-title){
  font-size: 30px !important;
  font-weight: bolder;
  font-style: oblique;
  letter-spacing: 0.2em;
}
.bad-water-wrap {
  width: 100%;
  height: 100%;
  padding: 50px 14px 20px 14px;
  display: flex;
  flex-direction: row;

  & > div {
    height: 100%;
  }

  .left-box {
    .dv-border-box-10{
     &>.border-box-content{
        padding: 8px;
      }

    }
    width: 25%;
    .dv-border-box-12{
      padding:7px 7px;
      display: flex;
      flex-direction: column;
    }
    & > div {
      width: 100%;
      height: 33.33%;
      padding: 10px 0;
    }

    .left-up {
      .dv-border-box-12{
        padding:7px 7px;
        display: flex;
        flex-direction: column;
      }
    }

    .left-mid {

      :deep(.border-box-content){
        display: flex;
        flex-direction: column;
      }
    }

    .left-down {

    }
  }

  .middle-box {
    width: 50%;

    .middle-up {
      height: 60%;
      .dv-border-box-13{
        padding: 16px;
        img{
          width: 100%;
          height: 100%;
        }
      }

    }

    .middle-mid {
      height: 20%;
      .dv-border-box-8{
        padding:14px 14px;
        ::v-deep .border-box-content{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          img{
            width: 30%;
            height: 100%;
          }
        }

      }
    }

    .middle-down {
      height: 20%;

      .dv-border-box-8{
        padding:14px 14px;
        display: flex;
        flex-direction: column;
      }
    }
  }

  .right-box {
    width: 25%;

    & > div {
      width: 100%;
      height: 33.33%;
      padding: 10px 0;
    }
    //.dv-border-box-1{
    //  padding:7px 7px;
    //  display: flex;
    //  flex-direction: column;
    //}
    .right-up {
      height: 33.33%;
      ::v-deep .border-box-content{
        padding:7px 7px;
        display: flex;
        flex-direction: column;
      }

    }
    .right-mid {
      height: 33.33%;
      ::v-deep .border-box-content{
        padding:7px 7px;
        display: flex;
        flex-direction: column;
      }

    }
    .right-down {
      height: 33.33%;
      ::v-deep .border-box-content{
        padding:7px 7px;
        display: flex;
        flex-direction: column;
      }
    }
  }


  :deep(.clusterMarker){
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    background: rgba(8,60,156,0.8);
    border-color: rgba(8,60,156,1);;
    color: #ffffff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    border-radius: 50%;
    flex-wrap: nowrap;
  }
  :deep(.textMarker){
    background-color:#003366;
    font-size:12px;
    min-width: 120px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    border-radius: 6px;
  }


  :deep(.dv-border-box-11){
    .border-box-content{

    }
  }
}
</style>
